<template>
  <div class="detail flex sw">
    <div class="detail_left">
      <div class="detail_header flex spacebetween">
        <div class="detail_header_left">
          <div class="imgContainer">
            <img class="cover" :src="songStore.curSong.al.picUrl" alt="" />
          </div>
        </div>
        <div class="detail_header_right">
          <div class="message">
            <div class="message_top">
              <i class="label">{{ '单曲' }}</i>

              <span class="name">{{ songStore.curSong.name }}</span>
            </div>
            <div class="user_message">
              <div class="fs-12 username">
                歌手： <a v-html="songStore.curSong.ar[0].name"></a>
              </div>
              <div class="fs-12 username">
                所属专辑： <a v-html="songStore.curSong.al.name"></a>
              </div>
            </div>
            <div class="songListBtn">
              <button class="playbtn btn">
                <SvgIcon icon="icon-bofangqi-bofangshu"></SvgIcon>播放
              </button>
              <button class="btn">
                <SvgIcon icon="icon-tianjiawenjian-copy"></SvgIcon>收藏
              </button>
              <button class="btn">
                <SvgIcon icon="icon-zhuanfa"></SvgIcon>
                分享
              </button>

              <button class="btn">下载</button>
              <button class="btn">
                <SvgIcon icon="icon-pinglun"></SvgIcon>
                <!-- ({{ comment?.commentCount }}) -->
              </button>
            </div>

            <div class="lyric" :class="{ texthidden: textHidden }">
              {{ lyrictext }}
            </div>
            <div>
              <span style="float: right" @click="showText">
                {{ textHidden ? '展开' : '收起' }}
                <SvgIcon icon="icon-arrow-down"></SvgIcon
              ></span>
            </div>
          </div>
        </div>
      </div>
      <div class="mainArea"></div>
    </div>
    <div class="detail_right">
      <div class="g_asideBox">
        <div class="g_asideBox_header flex between">
          <div class="title fs-12">{{ '包含这首歌的歌单' }}</div>
        </div>
        <div class="g_asideBox_main flex">
          <ul class="singer_list">
            <li
              v-for="item in relateSongList"
              class="flex streamer_list_item"
              @click="jump(item.id)"
            >
              <a>
                <img class="asideCover" :src="item.coverImgUrl" alt="" />
              </a>
              <div class="detail_aside">
                <div class="fs-14 bold singer_name">{{ item.name }}</div>
                <div class="fs-12 singer_desc">
                  by：{{ item.creator.nickname }}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="g_asideBox">
        <div class="g_asideBox_header flex between">
          <div class="title fs-12">{{ '相似歌曲' }}</div>
        </div>
        <div class="g_asideBox_main flex">
          <ul>
            <li v-for="music in simimusic">
              <div class="songMes">
                <div class="fs-14">{{ music.name }}</div>
                <div class="fs-12 ar">
                  {{ music.artists.map((i) => i.name).join('/') }}
                </div>
              </div>
              <div></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: '',
}
</script>

<script lang="ts" setup>
import { reqLyric } from '@/api/lyric'
import { simiMusic } from '@/api/model/song'

import { songListDetail } from '@/api/model/songList'
import { reqRelateSongList, reqSimiMusic, reqSimiPlayList } from '@/api/song'
import { useSongStore } from '@/stores/song'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const songStore = useSongStore()
const textHidden = ref(true)

function showText() {
  textHidden.value = !textHidden.value
}

const relateSongList = ref<songListDetail[]>()
async function getSimiPlayList(id: number) {
  let { playlists } = await reqSimiPlayList(id)
  relateSongList.value = playlists
}
const router = useRouter()
function jump(id: number) {
  router.push('/detail/songlist?songListId=' + id)
}
const lyrictext = ref()
async function getLyric(id: number) {
  const { lrc } = await reqLyric(id)
  lyrictext.value = lrc.lyric
}
const simimusic = ref<simiMusic[]>()
async function getSimiMusic() {
  const { songs } = await reqSimiMusic(songStore.id)
  simimusic.value = songs
}

onMounted(() => {
  getLyric(songStore.id)
  getSimiPlayList(songStore.id)
  getSimiMusic()
})
</script>

<style scoped lang="less">
.cover {
  width: 140px;
}

.imgContainer {
}

.detail {
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
}
.cover {
  width: 208px;
}
.user_message {
  margin-bottom: 20px;
}
.detail_header {
  font-size: 12px;
  margin-bottom: 40px;
}
.userImg {
  margin-right: 10px;
  width: 35px;
}
.username {
  color: #4273d4;
}
.detail_left {
  margin-top: 10px;

  width: 710px;
  padding: 25px 20px 0 40px;
}
.detail_header_left {
  margin-right: 30px;
  width: 210px;
}
.detail_header_right {
  width: 415px;
}
.message_top {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}
.songListBtn {
  margin-bottom: 20px;
}
.tags {
  margin-bottom: 10px;
}
.tag {
  display: inline-block;
  line-height: 21px;
  text-align: center;
  color: #666;

  height: 21px;
  font-size: 12px;
  border-radius: 20px;
  width: 50px;
  background: #f3f3f3;
}

.btn {
  height: 31px;
  margin-right: 6px;
  border: 1px solid #c3c3c3;
  border-radius: 5px;
  padding: 0 8px;
  color: #333333;
  background-image: linear-gradient(#fff, #f7f7f79c 50%, #fbfbfb);
}
.playbtn {
  width: 66px;
  color: #fff;
  background-image: linear-gradient(#4392db, #2172c1);
}

.btn:hover {
  background: #fff;
}
.playbtn:hover {
  background-image: linear-gradient(#a6c7e6, #2172c1);
}
.label {
  display: inline-block;
  width: 55px;
  color: #ffffff;
  font-size: 13px;
  padding-left: 8px;
  margin-right: 10px;
  line-height: 35px;
  background: url('@/assets/icon/BBD.png') left center no-repeat;
  background-size: 55px 45px;
}
.name {
  display: inline-block;
  line-height: 35px;
  font-size: 20px;
}
.desc {
  color: #666;
  white-space: pre-wrap;
  line-height: 1.5em;
  margin-bottom: 20px;
}
.lyric.texthidden {
  -webkit-line-clamp: 10; //用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
  display: -webkit-box; //和1结合使用，将对象作为弹性伸缩盒子模型显示
  -webkit-box-orient: vertical; //和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
  overflow: hidden; //文本溢出限定的宽度就隐藏内容
  text-overflow: ellipsis; //多行文本的情况下，用省略号“…”隐藏溢出范围的文本
}

.lyric {
  white-space: pre-wrap;
}

.g_asideBox {
  padding: 20px 30px;
}
.g_asideBox_main {
  margin-top: 20px;
  width: 210px;
  flex-wrap: wrap;
}

.subscriber {
  width: 40px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.ar {
  color: #99a6c4;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.asideCover {
  width: 50px;
}

.streamer_list_item {
  line-height: 20px;
  margin-bottom: 15px;
  .detail_aside {
    margin-left: 10px;
    min-width: 0;
  }
  .singer_name {
    font-weight: normal;
    font-size: 12px;
  }
}
.g_asideBox_header {
  padding-bottom: 10px;
  border-bottom: 1px solid #d4d4d4;
}
.songMes {
  margin-bottom: 10px;
}
</style>
